<template>
	<view class="my">
		<view class="header">
			<image src="../../static/head.png" mode=""></image>
			<view class="user">
				<view class="name">
					{{name || '用户昵称'}}
				</view>
				<view class="lv">
					等级：{{userlevelname||'体验用户'}}
				</view>
			</view>
		</view>
		<view class="tab">
			<view class="item">
				<view class="title">{{jinriyingli || 0}}</view>
				<view class="des">今日盈利</view>
			</view>
			<view class="item">
				<view class="title">{{jinrilianying || 0}}</view>
				<view class="des">今日连胜</view>
			</view>
			<view class="item">
				<view class="title">{{luishui || 0}}</view>
				<view class="des">今日流水</view>
			</view>
			<view class="item">
				<view class="title">{{jryongjin || 0}}</view>
				<view class="des">今日佣金</view>
			</view>
		</view>
		<view v-if="notice.title" class="announcement" @click="newsClick">
			<!-- <view class="title">{{notice.title}}</view> -->
			<view class="des">{{notice.title}}</view>
		</view>
		<view class="list_nav" :class="{mt140:!notice.title}">
			<view @click="go('Myassets')" class="item">
				<image class="icon" src="../../static/icon/zichan.png" mode=""></image>
				<view class="title">
					我的资产
				</view>
				<image class="right" src="../../static/icon/right.png" mode=""></image>
			</view>
			<view @click="go('Myteam')" class="item">
				<image class="icon" src="../../static/icon/tuandui.png" mode=""></image>
				<view class="title">
					我的团队
				</view>
				<image class="right" src="../../static/icon/right.png" mode=""></image>
			</view>
			<view @click="go('ContractProgress')" class="item">
				<image class="icon" src="../../static/icon/hyjd.png" mode=""></image>
				<view class="title">
					合约进度
				</view>
				<image class="right" src="../../static/icon/right.png" mode=""></image>
			</view>
			<view @click="goInvite()" class="item">
				<image class="icon" src="../../static/icon/yaoqing.png" mode=""></image>
				<view class="title">
					邀请好友
				</view>
				<image class="right" src="../../static/icon/right.png" mode=""></image>
			</view>
			<view @click="go('FundingDetails')" class="item">
				<image class="icon" src="../../static/icon/mingxi.png" mode=""></image>
				<view class="title">
					资金明细
				</view>
				<image class="right" src="../../static/icon/right.png" mode=""></image>
			</view>
			
			<view @click="gos()" class="item">
				<image class="icon" src="../../static/icon/shezhi.png" mode=""></image>
				<view class="title">
					修改密码
				</view>
				<image class="right" src="../../static/icon/right.png" mode=""></image>
			</view>
			<view class="item">
				<image class="icon" src="../../static/icon/kefu.png" mode=""></image>
				<view class="title">
					微信客服<text style="margin-left: 10rpx;">{{wx}}</text>
				</view>
				<view class="right_cont">
					<view @click="cope">点击复制</view>
					<image class="right" src="../../static/icon/right.png" mode=""></image>
				</view>
				
			</view>
		</view>
		<view class="version">
			当前版本：{{version}}
		</view>
		<u-button :hair-line="btnBorder" class="quit" @click="quit">安全退出</u-button>
		<Nav :current='navActive'></Nav>
		<!--Toast提示框-->
		<u-toast ref="uToast" />
		<u-modal show-cancel-button v-model="show" :content="content" @confirm="_quit"></u-modal>
	</view>
</template>

<script>
	import Nav from '../../component/Nav.vue'
	export default {
		components:{
			Nav
		},
		data(){
			return{
				navActive:4,
				btnBorder:false,
				name:'',//用户
				userlevelname:'',//等级
				uid:'',
				jinriyingli:0,//今日盈利
				jinrilianying:0,//今日连赢
				jryongjin:0,//今日佣金
				luishui:0,//今日流水
				notice:{},//公告
				show:false,
				content:'确定退出码？',
				wx:'taiyuan216',//微信号
				code:'',//邀请码
				phone:'',//手机号
				version:'',//版本号
			}
		},
		onShow(){
			try {
			    const value = uni.getStorageSync('version');
			    if (value) {
			        // console.log(value);
					this.version = value
			    }
			} catch (e) {
			    // error
			}

		},
		onReady() {
			
		},
		onLoad() {
			this.getUserInfo()
			this.getnotice()
		},
		onPullDownRefresh(){
			this.getUserInfo()
			this.getnotice()
		},
		methods: {
			//点击复制
			cope(){
				const _this = this
				uni.setClipboardData({
				    data: this.wx,
				    success: function (res) {
				        
				    },
				    fail:function(){
				    	
				    }
				});
			},
			
			//公告
			getnotice(){
				this.$http({
					url:this.$api.notice_getAll,
					method:'POST',
					data:{page:1,list_rows:1},
					success:res=>{
						this.notice = res.data.data[0]
					},
					complete:e=>{
						uni.stopPullDownRefresh();
					}
				})
			},
			//获取个人信息
			getUserInfo(){
				this.$http({
					url:this.$api.user_getinfo,
					method:'POST',
					success:res=>{
						//console.log('成功返回---------',res)
						this.name = res.data.name
						this.userlevelname = res.data.userlevelname
						this.uid = res.data.id
						this.jinriyingli = res.data.jinriyingli || 0
						this.jinrilianying = res.data.jinrilianying || 0
						this.jryongjin = res.data.jryongjin || 0
						this.luishui = res.data.luishui || 0
						this.code = res.data.code
						this.phone = res.data.phone
					},
					complete:e=>{
						uni.stopPullDownRefresh();
					}
				})
			},
			//系统公告
			newsClick(){
				uni.navigateTo({
				    url: `../News/index`
				});
			},
			//跳转
			go(e){
				//console.log('跳转',e)
				uni.navigateTo({
				    url: `./${e}`
				});
			},
			//进入邀请好友页面
			goInvite(){
				uni.navigateTo({
				    url: `./Invite?code=${this.code}`
				});
			},
			//进入修改密码页面
			gos(){
				uni.navigateTo({
				    url: '/pages/SecuritySettings/index?phone='+this.phone+'&type=zhaohui'
				});
			},
			//退出
			quit(){
				this.show = true
				
			},
			_quit(){
				const _this = this
				this.$http({
					url:this.$api.logout,
					method:'POST',
					success:res=>{
						//console.log('成功返回---------',res)
						uni.removeStorage({
						    key: 'userInfo',
						    success: function (res) {
						        uni.redirectTo({
						            url: '/pages/Login/index'
						        });
						    },
							fail:function(err){
								_this.$refs.uToast.show({
									title: '退出失败',
									type: 'error'
								})
							}
						});
					},
					fail:err=>{
						//console.log('失败返回------',err)
						_this.$refs.uToast.show({
							title: '退出失败',
							type: 'error'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my{
		.header{
			background-color: #3f0994;
			height: 400rpx;
			padding: 100rpx 40rpx 150rpx 40rpx;
			display: flex;
			align-items: center;
			image{
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
			}
			.user{
				margin-left: 27rpx;
				.name{
					font-weight: 600;
					color: #ffffff;
					font-size: 40rpx;
					letter-spacing: 1px;
					margin-bottom: 10rpx;
				}
				.lv,.uid{
					font-size: 22rpx;
					color: #D4851E;
					padding: 6rpx 10rpx;
					background-color: rgba(255,255,255,0.1);
					border-radius: 6px;
				}
			}
		}
		.announcement{
			width: calc(100% - 80rpx);
			margin: 140rpx auto 0 auto;
			padding: 20rpx;
			background:$border-bottom-color url(../../static/icon/gonggao.svg)20rpx center no-repeat;
			background-size: 40rpx 45rpx;
			padding-left: 80rpx;
			border-radius: 15rpx;
			overflow: hidden;
			.title{
				color: #5c67ff;
			}
			.des{
				color: #FFFFFF;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				
			}
		}
		.tab{
			width: calc(100% - 80rpx);
			padding: 47rpx 32rpx 42rpx 32rpx;
			background-color: $border-bottom-color;
			margin: 0 auto;
			margin-top: 40rpx;
			border-radius: 15rpx;
			text-align: center;
			display: flex;
			justify-content: space-between;
			position: absolute;
			left: 40rpx;
			top:250rpx;
			.item{
				max-width: 25%;
				.title{
					font-size: 20px;
					font-weight: 600;
					color: #FFFFFF;
				}
				.des{
					color: #999999;
					font-size: 12px;
					margin-top: 30rpx;
				}
				
			}
			.item:last-child{
				.des{
					border-right: 0;
				}
			}
		}
		.list_nav{
			margin: 20rpx auto;
			width: calc(100% - 80rpx);
			.item{
				display: flex;
				align-items: center;
				color: #FFFFFF;
				padding: 30rpx 0;
				border-bottom: 1px solid $border-bottom-color;
				.icon{
					max-width: 41.6rpx;
					max-height: 44.8rpx;
				}
				.right{
					width: 15rpx;
					height: 28rpx;
				}
				.right_cont{
					display: flex;
					width: 200rpx;
					align-items: center;
					view{
						margin: 0 10rpx;
						color: #5c67ff;
					}
				}
				.title{
					width: calc(100% - 82rpx);
					margin-left: 30rpx;
				}
			}
		}
		.mt140{
			margin-top: 140rpx
		}
		.quit{
			width: calc(100% - 82rpx);
			display: block;
			margin: 50rpx auto;
			background-color: $border-bottom-color;
			color: #ffffff;
			border-color: $border-bottom-color;
			font-size: 18px;
			font-weight: 600;
		}
		.version{
			text-align: center;
			color: #4d4f75;
		}
	}
</style>
